<link rel="import" href="../../html/polymer.html">

<!--
Style Module that defines color overrides for cr-elements on Chrome OS.

This file plumbs semantic colors from cros_colors.css into cr-elements.

To get Chrome OS System Colors, an element must:
- be beneath a <html> element with a "cros" attribute
- have a <style include="cros-color-overrides"> module in its style module list
-->
<dom-module id="cros-color-overrides">
  <template>
    <style>
      :host-context([cros]) cr-radio-button {
        --cr-radio-button-checked-color: var(--cros-radio-button-color);
        --cr-radio-button-checked-ripple-color:
            var(--cros-radio-button-ripple-color);
        --cr-radio-button-unchecked-color:
            var(--cros-radio-button-color-unchecked);
        --cr-radio-button-unchecked-ripple-color:
            var(--cros-radio-button-ripple-color-unchecked);
      }

      :host-context([cros]) cr-toggle {
        --cr-toggle-checked-bar-color: var(--cros-toggle-color);
        --cr-toggle-checked-button-color: var(--cros-toggle-color);
        --cr-toggle-checked-ripple-color: var(--cros-toggle-ripple-color);
        --cr-toggle-unchecked-bar-color: var(--cros-toggle-bg-color-inactive);
        --cr-toggle-unchecked-button-color:
            var(--cros-toggle-button-color-inactive);
        --cr-toggle-unchecked-ripple-color:
            var(--cros-toggle-ripple-color-inactive);
      }
    </style>
  </template>
</dom-module>
